<template>
  <div class="container">
    <!--筛选条件-->
    <div class="chooseSel">
      <div class="search">
        <el-input size="mini" v-model="txtKey" style="width: 30%" placeholder="请输入企业名称或公司主营"></el-input>
        <el-input size="mini" v-model="company_phone" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" placeholder="请输入手机号" style="width: 12%; margin: 0 10px 0 10px" maxlength="20"></el-input>
        <el-button size="mini" type="primary" @click="searchBtn()"><i class="el-icon-search" style="margin-right: 5px"></i>搜索</el-button>
      </div>
      <ul>
        <li class="hidden">
          <h3>行业分类：</h3>
          <dl class="industryClassList">
            <dd v-for="(item, index) in cateList" :key="index" :class="firstClassIsActive == index ? 'active' : ''" @click="addChoose('industryClass', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
        </li>
        <li>
          <h3>所在大洲：</h3>
          <dl class="addressList">
            <dd v-for="(item, index) in zhouList" :key="item" :class="addRessIsactive == index ? 'active' : ''" @click="addChoose('address', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
        </li>
        <li v-show="showCountry">
          <h3>所在国家：</h3>
          <dl class="addressList">
            <dd v-for="(item, index) in countryList" :key="item" :class="addCountryIsActive == index ? 'active' : ''" @click="addChoose('country', index, item)">
              <span>{{ item }}</span>
            </dd>
          </dl>
        </li>
        <li v-if="chooseArray.length > 0">
          <h3>筛选条件：</h3>
          <div class="condition">
            <div class="condition_item" v-for="(item, index) in chooseArray" :key="index">
              <strong>{{ item.typeName }}:</strong>
              <span>{{ item.name }}</span>
              <a @click="addChoose('cancel', index, item.typeName)"><i class="el-icon-close"></i></a>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="resource">
      <p>
        客户数据：<em>{{ totalPage }}</em
        >条
      </p>
      <div>
        <el-button size="mini" type="primary" disabled>AI外呼</el-button>
        <el-button size="mini" type="primary" disabled>加企微</el-button>
        <el-button size="mini" type="primary" disabled>短信</el-button>
        <el-button size="mini" type="primary" disabled>邮件</el-button>
        <el-button size="mini" type="primary" disabled>会员推送</el-button>
        <el-button size="mini" type="danger" disabled>踢出</el-button>
      </div>
    </div>
    <!--数据信息-->
    <div class="dataInfo">
      <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column align="center" header-align="center" label="联系人" prop="boss_name" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="联系电话" prop="company_phone" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="200"></el-table-column>
        <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
        <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="200"></el-table-column>
        <el-table-column align="center" header-align="center" label="公司类型" prop="company_type" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" header-align="center" label="所在国家" prop="shi" width="150"></el-table-column>
        <el-table-column align="center" header-align="center" label="经营状态" prop="opera_sts" width="200"></el-table-column>
        <el-table-column align="center" header-align="center" label="评分" prop="score" width="100"> </el-table-column>
        <el-table-column align="center" header-align="center" label="创建人" prop="created_user" width="150"></el-table-column>
        <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="detail(scope)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>

    <el-drawer title="客户详情" :visible.sync="showDrawer" size="80%">
      <popup v-if="showDrawer" page="plasticCustomer" :id="currentId" :tab="currentTab" :row="current" @change="handleDetailChange" />
    </el-drawer>
  </div>
</template>

<script>
import { apiCountryArr, apiGlobalCompanyArr, apiGlobalNation } from '@/api/customer'
import popup from '../components/popupCRMDetail.vue'

export default {
  name: 'index',
  components: { popup },

  data() {
    return {
      hiddenCity: false,
      isdisabled: false,
      addressHeight: '51px',
      industryClassHeight: '51px',
      isShowIndustryClass: false,
      isShowAddress: false,
      isShowAdvanced: true,
      txtKey: '',
      company_phone: '',
      searchParma: {
        cate1: '不限',
        country: '不限',
      },
      frequenterList: ['不限', '是', '否'], //老客
      type: [],
      // 行业分类
      firstClassIsActive: 0,
      secondClassIsActive: 0,
      // 所在大洲
      addRessIsactive: 0,
      //所在国家
      addCountryIsActive: 0,
      //选中筛选数据
      chooseArray: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      areaCitiesDate: [], //所在市级
      Jurisdictionlist: [], // 权限列表
      comBaseData: [], //筛选数据源
      current: {},
      currentId: '',
      currentTab: '',
      cateList: ['不限', '回收', '二手设备'],
      zhouCountryList: ['不限'],
      showDrawer: false,
      showCountry: false,
    }
  },
  computed: {
    zhouList() {
      return [
        '不限',
        ...this.zhouCountryList.map((item) => {
          return item.name
        }),
      ]
    },
    countryList() {
      if (this.addRessIsactive == 0) {
        return []
      } else {
        return [
          '不限',
          ...this.zhouCountryList[this.addRessIsactive - 1].children.map((item) => {
            return item.name
          }),
        ]
      }
    },
  },
  mounted() {
    this.getComBase()
    // 处理权限
    this.Jurisdictionlist = JSON.parse(localStorage.getItem('jurisdiction'))[this.$route.path] || []
  },
  methods: {
    init() {
      const { cate1, country } = this.$route.query
      if (cate1) {
        this.searchParma.cate1 = cate1
        let cateIndex = this.cateList.findIndex((item) => item === cate1) || 0
        this.addChoose('industryClass', cateIndex, cate1, 'init')
      }
      if (country) {
        let zhouIndex = -1,
          countryIndex = -1
        zhouIndex = this.zhouCountryList.findIndex((item) => {
          let index = item.children.findIndex((item) => item.name === country)
          if (index > -1) {
            countryIndex = index
            return true
          } else {
            return false
          }
        })
        if (zhouIndex > -1 && countryIndex > -1) {
          this.searchParma.zhou = this.zhouCountryList[zhouIndex].name
          this.searchParma.country = country
          this.addChoose('address', zhouIndex + 1, this.searchParma.zhou, 'init')
          this.addChoose('country', countryIndex + 1, country, 'init')
        }
      }

      this.getDataList()
    },
    //手机号是能是数字
    formatInput(value) {
      return value.replace(/^[1-9]\d*$/, '')
    },
    //点击行业分类展开
    highToggleIndustryClass() {
      this.isShowIndustryClass = !this.isShowIndustryClass
    },
    //点击所在地区展开
    showAddress(e) {
      console.log(e)
      this.isShowAddress = !this.isShowAddress
    },
    // 行业分类悬浮展开收起
    onHoverIndustryClass(e) {
      let industryClassHeight = e.currentTarget.getElementsByClassName('industryClassList')[0].children.length
      if (industryClassHeight > 10) {
        this.industryClassHeight = e.currentTarget.getElementsByClassName('industryClassList')[0].clientHeight + 'px'
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.add('el-icon-caret-top')
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.remove('el-icon-caret-bottom')
      }
    },
    onLeaveIndustryClass(e) {
      let industryClassHeight = e.currentTarget.getElementsByClassName('industryClassList')[0].children.length
      if (industryClassHeight > 10) {
        this.industryClassHeight = '51px'
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.add('el-icon-caret-bottom')
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.remove('el-icon-caret-top')
      }
    },
    // 所在地区悬浮展示收起
    onHover(e) {
      let addressList = e.currentTarget.getElementsByClassName('addressList')[0].children.length
      if (addressList > 10) {
        this.addressHeight = e.currentTarget.getElementsByClassName('addressList')[0].clientHeight + 'px'
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.add('el-icon-caret-top')
        e.currentTarget.getElementsByClassName('el-icon-caret-bottom')[0].classList.remove('el-icon-caret-bottom')
      }
    },
    onLeave(e) {
      let addressList = e.currentTarget.getElementsByClassName('addressList')[0].children.length
      if (addressList > 10) {
        this.addressHeight = '51px'
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.add('el-icon-caret-bottom')
        e.currentTarget.getElementsByClassName('el-icon-caret-top')[0].classList.remove('el-icon-caret-top')
      }
    },
    //高级筛选展开收起
    highToggle() {
      this.isShowAdvanced = !this.isShowAdvanced
    },
    //筛选点击事件
    addChoose(type, index, item, init = '') {
      this.chooseArray.forEach((item, index) => {
        if (item.type == type) {
          this.chooseArray = this.chooseArray.filter((item) => {
            return item.type !== type
          })
        }
      })
      if (type == 'industryClass') {
        this.firstClassIsActive = index
        if (item != '不限') {
          this.chooseArray.push({
            type: 'industryClass',
            typeName: '行业分类',
            name: item,
            value: item,
          })
        }
        this.searchParma.cate1 = item
      } else if (type == 'address') {
        this.addRessIsactive = index
        if (item != '不限') {
          this.showCountry = true
          this.chooseArray.push({
            type: 'address',
            typeName: '所在大洲',
            name: item,
            value: item,
          })
        } else {
          this.showCountry = false
        }
        this.chooseArray = this.chooseArray.filter((item) => item.type !== 'country')
        this.searchParma.country = '不限'
        this.addCountryIsActive = 0
        this.searchParma.zhou = item
      } else if (type == 'country') {
        this.addCountryIsActive = index
        if (item != '不限') {
          this.chooseArray.push({
            type: 'country',
            typeName: '所在国家',
            name: item,
            value: item,
          })
        }
        this.searchParma.country = item
      } else if (type == 'cancel') {
        this.chooseArray.splice(index, 1)
        if (item == '行业分类') {
          this.searchParma.cate1 = '不限'
          this.firstClassIsActive = 0
        } else if (item == '所在大洲') {
          this.searchParma.zhou = '不限'
          this.addRessIsactive = 0
          this.showCountry = false
          this.chooseArray = this.chooseArray.filter((item) => item.type !== 'country')
          this.searchParma.country = '不限'
          this.addCountryIsActive = 0
        } else if (item == '所在国家') {
          this.searchParma.country = '不限'
          this.addCountryIsActive = 0
        }
      }
      if (init !== 'init') {
        this.pageIndex = 1
        this.getDataList()
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign(
        {
          pageNumber: this.pageIndex,
          pageSize: this.pageSize,
          title: this.txtKey,
          company_phone: this.company_phone,
        },
        this.searchParma
      )
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      apiGlobalCompanyArr(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 提交搜索
    searchBtn() {
      this.pageIndex = 1
      let search = {
        cate1: '不限',
        zhou: '不限',
        country: '不限',
        title: this.txtKey,
        company_phone: this.company_phone,
        pageNumber: this.pageIndex,
        pageSize: this.pageSize,
      }
      if (this.chooseArray.length > 0) {
        for (var i = 0; i < this.chooseArray.length; i++) {
          if (this.chooseArray[i].type == 'industryClass') {
            search.cate1 = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'address') {
            search.zhou = this.chooseArray[i].value
          }
          if (this.chooseArray[i].type == 'country') {
            search.country = this.chooseArray[i].value
          }
        }
      }

      const formData = new FormData()
      for (let key in search) {
        formData.set(key, search[key])
      }
      apiGlobalCompanyArr(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },

    // 获取数据列表
    getComBase() {
      apiGlobalNation()
        .then((res) => {
          this.zhouCountryList = res.data
          this.init()
        })
        .catch((e) => {
          this.zhouCountryList = ['不限']
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    //详情
    detail(scope) {
      this.current = scope.row
      this.currentId = scope.row.id
      this.currentTab = 0
      this.showDrawer = true
    },
    // 跳转详情的历史处置记录
    handleDetail(scope) {
      this.current = scope.row
      this.currentId = scope.row.id
      this.currentTab = 8
      this.showDrawer = true
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    handleDetailChange({ type, value }) {
      this.current[type] = value
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #f0f1f4;
  padding: 16px;
  box-sizing: border-box;
}
.chooseSel,
.dataInfo {
  width: 100%;
  background: #fff;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 4px;
}
.chooseSel .search {
  margin-bottom: 16px;
}
.chooseSel ul {
  border: 1px solid #e2e2e2;
  padding: 0;
  margin: 0;
}
.chooseSel li {
  display: flex;
  border-bottom: 1px solid #e2e2e2;
  //height: 51px;
  min-height: 51px;
  height: auto;
  overflow: hidden;
  -webkit-transition: height 0.25s;
  -moz-transition: height 0.25s;
  -ms-transition: height 0.25s;
  -o-transition: height 0.25s;
}
.chooseSel li h3 {
  width: 100px;
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  background: #f9f9f9;
  color: #333333;
  font-weight: bold;
  font-size: 12px;
  margin: 0;
  line-height: 30px;
}
.chooseSel li dl {
  width: 87%;
  font-size: 0;
  padding: 10px 10px;
  display: table;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}
.chooseSel .advanced_screen li dl {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}
.chooseSel li dl dd {
  display: inline-block;
  margin: 0 10px 0 0;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  color: #333333;
}
.chooseSel li dl dd a,
.chooseSel li dl dd span {
  padding: 6px;
  margin-bottom: 10px;
  display: inline-block;
}
.chooseSel li dl dd.active a,
.chooseSel li dl dd.active span {
  background: #2c68ff;
  border-radius: 2px;
  color: #fff;
}
.chooseSel li dl dt {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 12px;
  color: #333333;
}
.chooseSel li dl dd.active a {
  color: #fff;
}
.chooseSel li p {
  text-align: center;
  width: 30px;
  color: #666666;
  cursor: pointer;
  margin: 0;
}
.chooseSel li dl dt {
  display: inline-block;
  margin-right: 10px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  color: #333333;
  line-height: 20px;
}
.condition {
  display: flex;
  align-items: center;
  margin-left: 12px;
}
.condition .condition_item {
  border: 1px dashed #2c68ff;
  color: #2c68ff;
  padding: 5px 10px;
  position: relative;
  margin-right: 10px;
}
.condition .condition_item strong {
  font-weight: 100;
}
.condition .condition_item i {
  position: absolute;
  right: -6px;
  top: -10px;
  background: #2c68ff;
  color: #fff;
  border-radius: 50%;
  font-weight: 100;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  cursor: pointer;
}
.el-radio,
.el-checkbox {
  margin-right: 30px;
  line-height: 30px;
}
.el-radio-group {
  vertical-align: revert;
  flex: 1;
}
::v-deep .el-radio__label,
::v-deep .el-checkbox__label {
  font-size: 12px;
}
.resource {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.resource p {
  color: #333333;
}
.resource p em {
  color: #2c68ff;
  font-style: normal;
}
.el-date-editor.el-input,
.el-input-number,
.el-select {
  width: 100%;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .delayBlock .el-form-item__content {
  display: flex;
}
::v-deep .delayBlock .el-form-item__content .el-input-number {
  margin: 0 20px;
}
.tip {
  font-size: 12px;
}
.search-item {
  display: inline;
  margin-right: 10px;
  label {
    display: inline;
    float: none;
    padding-right: 0px;
  }
}
::v-deep input[type='number']::-webkit-outer-spin-button,
::v-deep input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
::v-deep input[type='number'] {
  -moz-appearance: textfield;
}
</style>
